
<template>
  <div>
    <h1 class="text-3xl font-bold text-gray-900 mb-6">学习统计</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-calendar-day text-white text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">今日练习</p>
            <p class="text-2xl font-bold text-gray-900">{{ statistics.todayPractices || 0 }}</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-check-circle text-white text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">完成模块</p>
            <p class="text-2xl font-bold text-gray-900">{{ statistics.completedModules || 0 }}</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center">
          <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-code text-white text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-600">累计代码</p>
            <p class="text-2xl font-bold text-gray-900">{{ statistics.totalLinesOfCode || 0 }} 行</p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold mb-4">最近练习记录</h2>
      <div v-if="records.length === 0" class="text-gray-500 text-center py-8">
        暂无练习记录
      </div>
      <div v-else class="space-y-4">
        <div 
          v-for="record in records" 
          :key="record.id"
          class="border rounded-lg p-4"
        >
          <div class="flex justify-between items-start">
            <div>
              <h3 class="font-semibold">{{ record.module.name }}</h3>
              <p class="text-sm text-gray-600">{{ formatDate(record.createdAt) }}</p>
            </div>
            <span 
              :class="record.isCompleted ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'"
              class="px-2 py-1 rounded-full text-xs"
            >
              {{ record.isCompleted ? '已完成' : '进行中' }}
            </span>
          </div>
          <div class="mt-2">
            <span class="text-sm text-gray-600">代码行数: {{ record.linesOfCode }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  name: 'Statistics',
  setup() {
    const statistics = ref({})
    const records = ref([])
    const userId = 'user123' // 临时用户ID

    const fetchStatistics = async () => {
      try {
        const response = await axios.get(`/api/statistics/${userId}`)
        statistics.value = response.data
        
        const recordsResponse = await axios.get(`/api/practice-records/user/${userId}`)
        records.value = recordsResponse.data
      } catch (error) {
        console.error('获取统计失败:', error)
      }
    }

    const formatDate = (dateString) => {
      return new Date(dateString).toLocaleString('zh-CN')
    }

    onMounted(() => {
      fetchStatistics()
    })

    return {
      statistics,
      records,
      formatDate
    }
  }
}
</script>
